<template>
    <div>
        <table class="table table-bordered">
            <tr>
                <td align="right">户型名称</td>
                <td>
                    <input type="text" v-model="info.Name">
                </td>
            </tr>
            <tr>
                <td align="right">户型结构</td>
                <td>
                   <select v-model="info.Bind">
                    <option value="">请选择</option>
                    <option v-for="item in list1" :key="item.Id">{{ item.Bind }}</option>
                   </select>
                </td>
            </tr>
            <tr>
                <td align="right">装修标准</td>
                <td>
                    <input type="text" v-model="info.BiaoZhun">
                </td>
            </tr>
            <tr>
                <td align="right">建筑面积</td>
                <td>
                    <input type="text" v-model="info.Area">
                </td>
            </tr>
            <tr>
                <td align="right">套内面积</td>
                <td>
                    <input type="text" v-model="info.InterArea">
                </td>
            </tr>
            <tr>
                <td align="right">户型图</td>
                <td>
                    <input type="file" @change="img">
                    <img :src="info.Photo" width="100" height="100" v-if="info.Photo!=''" >
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td>
                    <input type="button" value="修改" class="btn btn-primary" @click="Ok">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute();
const router=useRouter();
let info:any=reactive({
    "Id":route.query.id,
    "Name": "",
  "Bind": "",
  "BiaoZhun": "",
  "Area": "",
  "InterArea": "",
  "Photo": "",
})
let list1:any=ref([]);
onMounted(()=>{
    getList1();
    Fan();
})
const getList1=()=>{
    axios({
        url:'http://localhost:5051/api/Rooms/GetBindList',
        method:'get',
        params:list1
    })
    .then(res=>{
        list1.value=res.data;
    })
    .catch(err=>{
        console.log(err);
        
    })
}
const Fan=()=>{
    axios({
        url:'http://localhost:5051/api/Rooms/FanTian',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(info,res.data);
    })
    .catch(err=>{
        console.log(err);
        
    })
    
}
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'http://localhost:5051/api/imgs/Img',
        method:'post',
        data:f
    })
    .then(res=>{
        if(res.data=='格式不正确')
    {
        alert('只能是PNG、JPG格式');
        return;
    }
    if(res.data=='不能大于1M')
    {
        alert('图片最多不能超过1MB');
        return;
    }
        info.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
        
    })
}
const Ok=()=>{
    if(info.Name=='')
{
    alert('户型名称不能为空');
    return;
}
if(info.Bind=='')
{
    alert('户型结构不能为空');
    return;
}
if(info.Area=='')
{
    alert('建筑面积不能为空');
    return;
}
if(info.InterArea=='')
{
    alert('套内面积不能为空');
    return;
}
if(info.Area<info.InterArea)
{
    alert('套内面积必须小于建筑面积');
    return;
}

if(info.Area<60 || info.Area>300)
{
    alert('建筑面积不得小于60,不得大于300');
    return;
}
    axios({
        url:'http://localhost:5051/api/Rooms/UpdateRoom',
        method:'put',
        data:info
    })
    .then(res=>{
        if(res.data>0)
    {
        alert('修改成功');
        router.push('/Show');
    }
    else{
        alert('修改失败');
        return;
    }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>